<template>
  <div class="agreement-wrap">
    <div class="icon-wrpa "
         :class="{select: isSelect}"
         @click="handleChange">
      <i class="iconfont icon-xuanzhong"></i>
    </div>
    <div class="desc">已阅读并同意 <span @click="handleAgreement">《协议》</span></div>
  </div>
</template>
<script>
export default {
  name: 'agreement',
  props: {
    isSelect: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleChange () {
      this.$emit('changeIsSelect')
    },
    handleAgreement () {
      this.$emit('isShow', true)
    },
    getProtocol () {
      this.$api.user.protocol()
        .then(this.getProtocolSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getProtocolSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.$emit('getProtocol', data.protocol)
      }
    }
  },
  created () {
    this.getProtocol()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.agreement-wrap
  display flex
  align-items center

  .icon-wrpa
    width 28px
    height 28px
    border 2px solid rgba(87, 96, 111, 1)
    border-radius 5px
    display flex
    justify-content center
    align-items center
    margin-right 9px

    i
      font-size $address
      color $common_bgc_gray

  .icon-wrpa.select
    border 2px solid transparent
    background-color $agreement

    i
      font-size $address
      color $common_bgc

  .desc
    font-size $common_fz
    font-weight 400
    color $agreement_prefix

    span
      color $agreement
</style>
